<template>
  <div v-for="(item, index) in resourceData" :key="index" class="px-1 py-1 info_bgc">
    <div class="flex mt-1">
      <div v-if="item.longOrShort === '1'" class="circle_icon">远用</div>
      <div v-if="item.longOrShort === '2'" class="circle_icon short_icon">近用</div>
      <div class="flex-1 ml-2">
        <div class="flex justify-between mt-1">
          <div class="">
            <span class="mr-8">经手：{{ item.jsr }}</span>
            <span>验光：{{ item.ygr }}</span>
            <br />
            <span class="mr-8">门诊：{{ item.mzr }}</span>
            <span>推荐：{{ item.tjr }}</span>
            <br />
            <span>总额：{{ formatAmount(item.zje) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div>
      <a-card>
        <div class="flex">
          <div class="w-6"></div>
          <div class="flex-1 font-bold">名称</div>
          <div class="w-2/12 text-center font-bold">数量</div>
          <div class="w-3/12 text-right font-bold">金额</div>
        </div>
        <div v-for="(it, idx) in item.mxResponseList" :key="idx">
          <div class="flex">
            <div class="w-6 text-center mr-1" style="color: #0000ff">{{ it.eyesType }}</div>
            <div class="flex flex-1 truncate">
              <div :title="it.mc">{{ it.mc }}</div>
              <div v-if="it.gg" :title="it.gg" class="text-gray-400 ml-2 mt-1 text-xs">{{ it.gg }}</div>
              <div v-if="it.cj" :title="it.cj" class="text-gray-400 ml-2 text-xs max-w-[64px] truncate">{{ it.cj }}</div>
            </div>
            <div class="w-2/12 text-center">{{ it.num }}{{ it.unit }}</div>
            <div class="w-3/12 text-right">{{ formatAmount(it.payAmount) }}</div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>
<script setup>
import { formatAmount } from '@/utils/format.js'

defineProps({
  resourceData: {
    type: Array,
    default: () => []
  }
})
</script>
<style lang="less" scoped>
.info_bgc {
  background-color: #f2f2f2;
}
.circle_icon {
  display: flex;
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  background-color: #4040d1;
  border-radius: 50%;
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.short_icon {
  background-color: #789c42 !important;
}
:deep(.ant-card-body) {
  padding: 12px 12px 12px 2px;
}
</style>
